<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    姓名: <input type="text" class="username">
    年龄: <input type="text" class="userage">
    性别: <input type="text" class="usergender">
    <button class="add">添加</button>
    <table border="1px" width="50%" id="table">
        <thead>
            <tr>
                <th>索引</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody> </tbody>
    </table>

    <script>
        var userList = [
            {
                name: '张三',
                age: 18,
                gender: '男'
            }
        ]
        // 获取元素
        var tBody = document.querySelector('tbody')
        // 添加按钮
        var addBtn = document.querySelector('.add')
        // 获取姓名
        var userName = document.querySelector('.username')
        // 获取年龄
        var userAge = document.querySelector('.userage')
        // 获取性别
        var userSex = document.querySelector('.usergender')
        form()
        function form() {
            var frg = document.createDocumentFragment()
            userList.forEach(function (item, index) {
                var tr = document.createElement('tr')

                var td = document.createElement('td')
                td.innerHTML = index
                tr.appendChild(td)

                for (var key in item) {
                    var td = document.createElement('td')
                    td.innerHTML = item[key]
                    tr.appendChild(td)
                }

                var td = document.createElement('td')
                td.innerHTML = '<button class="del" index="' + index + '">删除</button>'
                tr.appendChild(td)

                frg.appendChild(tr)
            })
            tBody.innerHTML = ''
            tBody.appendChild(frg)
        }
        // 添加功能
        addBtn.addEventListener('click', function () {
            var username = userName.value
            var age = userAge.value
            var gender = userSex.value
            var userInfo = {
                name: username,
                age: age,
                gender: gender
            }
            userList.push(userInfo)
            form()
            userName.value = ''
            userAge.value = ''
            userSex.value = ''
        })
        // 删除功能
        tBody.addEventListener('click', function (e) {
            // 处理事件对象兼容
            e = e || widnow.event
            // 处理事件目标兼容
            var target = e.target || e.srcElement
            // 通过 target 来判断我点击的是否是 button 按钮
            if (target.nodeName === 'BUTTON') {
                // 拿到你点击的那个删除按钮身上记录的 index 
                var index = Number(target.getAttribute('index'))
                // 删除数组中对应索引的数据
                userList.splice(index, 1)
                // 重新渲染页面
                form()
            }
        })
        // 修改功能

    </script>
</body>

</html>